<template>
	<div class="wrapper">

		<!--<div class="dis" v-if="list.agentPosChannelRateConfigInf.zfbRate!=''">
			<div class="main">
				<div class="dia" style="justify-content: space-between;">
					<div class="dia">
						<div class="line" style="background-color: #FF8602;">
							
						</div>
						<div class="wx_box">支付宝</div>
					</div>
					<div class="line_botom">
						{{list.agentPosChannelRateConfigInf.zfbRate}}
					</div>
				</div>
			</div>
		</div> -->
		<div class="dis" v-if="list.agentPosChannelRateConfigInf.creditCardDrate!='' && list.agentPosChannelRateConfigInf.creditCardDrate">
			<div class="main">
				<div class="dia" style="justify-content: space-between;">
					<div class="dia">
						<div class="line" style="background-color: #02CAFF;">

						</div>
						<div class="wx_box">信用卡</div>
					</div>
					<div class="dia">
						<div class="">
							{{list.agentPosChannelRateConfigInf.creditCardDrate}}
						</div>
						<div class="">
							%
						</div>

					</div>
				</div>
				<!-- <div class="line_botom" style="border-bottom: 1px solid #02CAFF;">
					
				</div> -->
			</div>
		</div>
		<div class="dis" v-if="list.agentPosChannelRateConfigInf.ysfRate!=''">
			<div class="main">
				<div class="dia" style="justify-content: space-between;">
					<div class="dia">
						<div class="line" style="background-color: #C002FF;">

						</div>
						<div class="wx_box">云闪付</div>
					</div>
					<div class="">
						{{list.agentPosChannelRateConfigInf.ysfRate}}%
					</div>
				</div>
				<!-- <div class="line_botom" style="border-bottom: 1px solid #C002FF;">
					
				</div> -->
			</div>
		</div>
        
		<!-- <div class="dis" v-if="list.agentPosChannelRateConfigInf.dcardCap!=''">
			<div class="main">
				<div class="dia" style="justify-content: space-between;">
					<div class="dia">
						<div class="line" style="background-color: #FF8602;">

						</div>
						<div class="wx_box">借记卡封顶</div>
					</div>
					<div class="">
						{{list.agentPosChannelRateConfigInf.dcardCap}}元
					</div>
				</div>
				
			</div>
		</div> -->
		<!-- <div class="dis" v-if="list.agentPosChannelRateConfigInf.debitCardTrate!=''">
			<div class="main">
				<div class="dia" style="justify-content: space-between;">
					<div class="dia">
						<div class="line" style="background-color: #0257FF;">

						</div>
						<div class="wx_box">借记卡</div>
					</div>
					<div class="">
						{{list.agentPosChannelRateConfigInf.debitCardTrate}}%
					</div>
				</div>
				
			</div>
		</div> -->
        <div class="dis" v-if="list.agentPosChannelRateConfigInf.ccardTrateYx!=''">
        	<div class="main">
        		<div class="dia" style="justify-content: space-between;">
        			<div class="dia">
        				<div class="line" style="background-color: #0257FF;">
        
        				</div>
        				<div class="wx_box">优惠贷记卡成本</div>
        			</div>
        			<div class="">
        				{{list.agentPosChannelRateConfigInf.ccardTrateYx}}%
        			</div>
        		</div>
        		
        	</div>
        </div>
		<div class="dis" v-if="list.agentPosChannelRateConfigInf.firstSimCost!=''">
			<div class="main">
				<div class="dia" style="justify-content: space-between;">
					<div class="dia">
						<div class="line" style="background-color: #ff6f61;">
		
						</div>
						<div class="wx_box">电签首次流量卡成本</div>
					</div>
					<div class="">
						{{list.agentPosChannelRateConfigInf.firstSimCost}}元
					</div>
				</div>
				<!-- <div class="line_botom" style="border-bottom: 1px solid #0257FF;">
					
				</div> -->
			</div>
		</div>
		<div class="dis" v-if="list.agentPosChannelRateConfigInf.repeSimCost!=''&& list.agentPosChannelRateConfigInf.repeSimStatus==0">
			<div class="main">
				<div class="dia" style="justify-content: space-between;">
					<div class="dia">
						<div class="line" style="background-color: #1a2980;">
		
						</div>
						<div class="wx_box">电签多次流量卡成本</div>
					</div>
					<div class="">
						{{list.agentPosChannelRateConfigInf.repeSimCost}}元
					</div>
				</div>
			</div>
		</div>
        <div class="dis" v-if="list.agentPosChannelRateConfigInf.djFirstSimCost!=''">
        	<div class="main">
        		<div class="dia" style="justify-content: space-between;">
        			<div class="dia">
        				<div class="line" style="background-color: #ff6f61;">
        
        				</div>
        				<div class="wx_box">大机首次流量卡成本</div>
        			</div>
        			<div class="">
        				{{list.agentPosChannelRateConfigInf.djFirstSimCost}}元
        			</div>
        		</div>
        		<!-- <div class="line_botom" style="border-bottom: 1px solid #0257FF;">
        			
        		</div> -->
        	</div>
        </div>
        <div class="dis" v-if="list.agentPosChannelRateConfigInf.djRepeSimCost!=''&& list.agentPosChannelRateConfigInf.djRepeSimStatus==0">
        	<div class="main">
        		<div class="dia" style="justify-content: space-between;">
        			<div class="dia">
        				<div class="line" style="background-color: #1a2980;">
        
        				</div>
        				<div class="wx_box">大机多次流量卡成本</div>
        			</div>
        			<div class="">
        				{{list.agentPosChannelRateConfigInf.djRepeSimCost}}元
        			</div>
        		</div>
        	</div>
        </div>
        <div class="dis" v-if="list.agentPosChannelRateConfigInf.miFirstSimCost!=''">
        	<div class="main">
        		<div class="dia" style="justify-content: space-between;">
        			<div class="dia">
        				<div class="line" style="background-color: #ff6f61;">
        
        				</div>
        				<div class="wx_box">微智能首次流量卡成本</div>
        			</div>
        			<div class="">
        				{{list.agentPosChannelRateConfigInf.miFirstSimCost}}元
        			</div>
        		</div>
        		<!-- <div class="line_botom" style="border-bottom: 1px solid #0257FF;">
        			
        		</div> -->
        	</div>
        </div>
        <div class="dis" v-if="list.agentPosChannelRateConfigInf.miRepeSimCost!=''&& list.agentPosChannelRateConfigInf.miRepeSimStatus==0">
        	<div class="main">
        		<div class="dia" style="justify-content: space-between;">
        			<div class="dia">
        				<div class="line" style="background-color: #1a2980;">
        
        				</div>
        				<div class="wx_box">微智能多次流量卡成本</div>
        			</div>
        			<div class="">
        				{{list.agentPosChannelRateConfigInf.miRepeSimCost}}元
        			</div>
        		</div>
        	</div>
        </div>
        <div class="dis" >
        	<div class="main">
        		<div class="dia" style="justify-content: space-between;">
        			<div class="dia">
        				<div class="line" style="background-color: #1a2980;">
        
        				</div>
        				<div class="wx_box">押金成本</div>
        			</div>
        			<div class="">
        				{{list.agentPosChannelRateConfigInf.depositCost}}元
        			</div>
        		</div>
        	</div>
        </div>
        
		<div class="dis" v-for="(item,index) in list.agentSubsidyRateConfigInfs" :key="index" style="margin-top: 12px;">
			<div class="main_box">
				<!-- 可以使用 CellGroup 作为容器 -->
				<van-cell-group inset>
					<van-field v-model="item.subsidyPeriod" label-width="100" label="补贴周期(天)" placeholder="请输入补贴周期"
						input-align="right" :border="false" />
					<van-field v-model="item.subsidyRate" label-width="140" label="补贴费率(%)" placeholder="请输入补贴费率"
						input-align="right" :border="false" />
				</van-cell-group>
			
			</div>
		</div>
		
	</div>
</template>

<script>
	import {
		selectAgentChannelRate,
		selectAgentChannelRateSubsidyRate
	} from '@/api/terminal'
	import store from '@/store'
	import {
		showToast
	} from 'vant'
	export default defineComponent({
		name: 'sateActive',
		setup() {
			const router = useRouter()
			const routers = useRoute()
			const state = reactive({
				list: []
			})

			const getList = () => {
				console.log(routers.query)
				selectAgentChannelRateSubsidyRate({
					channelCode: routers.query.channelCode,
					// activityId: routers.query.activityId,
					agentNo: store.state.user.agentNo
				}).then(res => {
					state.list = res.data

				})
			}
			getList()
			return {
				...toRefs(state),
				getList
			}
		}
	})
</script>
<style scoped lang="scss">
	.wrapper {
		background: #F9FBFF;
		width: 100%;
		height: 100%;
		min-height: 100vh;

		.main {
			width: 92%;
			// height: 54px;
			background: #FFFFFF;
			border-radius: 6px;
			margin-top: 12px;
			padding: 14px 12px;
			box-sizing: border-box;

			.line {
				width: 3px;
				height: 13px;
				background: #0257FF;
				border-radius: 2px;
			}

			.line_botom {
				padding: 4px 3px;
				border-bottom: 1px solid #0257FF;
			}

			.wx_box {
				margin-left: 12px;
			}
		}

		.main_box {
			border-radius: 6px 6px 6px 6px;
			// box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
			padding: 5px 0px;
			box-sizing: border-box;
			width: 100%;

			.overlay {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 1;
				/* 确保覆盖层在输入框之上 */
			}
		}
	}
</style>